<template>
  <div id="app" class="background">
    <el-container>
      <el-aside width="200px" class="menu-aside">
        <el-menu
          :default-openeds="['1','2']"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">预测</template>
            <el-menu-item-group>
              <template slot="title">医疗</template>
              <el-menu-item index="1-1" @click="navigateTo('/medical-prediction')">医疗数据预测</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">薪资</template>
              <el-menu-item index="1-3" @click="navigateTo('/salary-prediction')">薪资数据预测</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item-group index="2">
            <template slot="title">模型训练</template>
            <el-menu-item index="2-1" @click="navigateTo('/model-training')">模型训练</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-container class="content-container">
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  methods: {
    navigateTo(route) {
      if (this.$router.currentRoute.path !== route) {
        this.$router.push(route);
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff; /* 设置全局字体颜色为白色 */
}

.menu-aside {
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}

.el-menu-vertical-demo {
  width: 200px;
  height: 100vh;
  border-right: none;
}

/* 隐藏滚动条但保留滚动功能 */
.menu-aside::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.el-menu-vertical-demo {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;  /* Firefox */
}

/* 添加背景图片 */
.background {
  background-image: url("C:\Users\huang\Desktop\Data\1.jpg"); /* 替换为你的背景图片路径 */
  background-size: cover; /* 根据需要调整背景图片大小 */
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed; /* 背景图片固定，随页面滚动 */
  min-height: 100vh;
  width: 100%;
}

.content-container {
  margin-left: 200px;
  padding-top: 20px; /* 调整顶部填充以确保内容不被遮挡 */
  color: #fff; /* 设置内容字体颜色为白色 */
}
</style>